<script setup lang="ts">
  import { pageUrl, safeBottom } from '@/utils/constants'
  import { previewImg, fullUrl, arrayFullUrl, onShowRefreshData } from '@/utils/common'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, watchEffect, reactive, computed } from 'vue'
  import { getVoteDetailApi } from "@/api/home"
  import { VoteApi } from '@/api/home'

  const props = defineProps<{
    id : string | number
    scene ?: string
  }>()

  //接收参数
  const query = reactive({
    id: props.id,
  })

  //商品详情
  const vote_info = ref()
  const get_vote_detail = async () => {
    const res = await getVoteDetailApi(query)
    // console.log(res)
    vote_info.value = res.result
  }


  //更新轮播图下标
  const currentIndex = ref(0)
  const updateIndex : UniHelper.SwiperOnChange = (event) => {
    currentIndex.value = event.detail.current
  }

  const getMoreEvaluate = () => {
    uni.navigateTo({
      url: `${pageUrl['goods-evaluate']}?goods_id=${query.id}`,
    })
  }


  // 定义倒计时相关变量
  const countdown = ref(5); // 倒计时时间，单位秒
  const isDisabled = ref(false); // 按钮是否禁用
  const timer = ref<ReturnType<typeof setTimeout> | null>(null); // 存储定时器的引用

  // 开始倒计时函数
  const startCountdown = () => {
    if (timer.value !== null) {
      clearTimeout(timer.value); // 如果已经有定时器在运行，先清除它
    }

    isDisabled.value = true; // 禁用按钮
    countdown.value = 5; // 重置倒计时

    timer.value = setTimeout(() => {
      let remainingTime = countdown.value;
      const intervalId = setInterval(() => {
        if (remainingTime >= 0) {

          countdown.value = remainingTime--;

        } else {
          clearInterval(intervalId); // 清除倒计时间隔
          isDisabled.value = false; // 启用按钮
          timer.value = null; // 清除定时器引用
        }
      }, 1000); // 每秒更新一次倒计时
    }, 0); // 立即执行
  };
  const doVote = async (id : number) => {
    const data = {
      id: id
    }
    // console.log(data)
    const res = await VoteApi(data)
    // console.log(res)
    if (res.code === 200) {
      uni.showToast({
        title: '投票成功',
        duration: 1000
      });
      uni.switchTab({
        url: "/pages/index/index"
      })
    }

  }

  // onShareAppMessage(() => {
  //   sharePopupRef.value.close()

  //   const sharePath = `${pageUrl['goods-detail']}?id=${goods.value?.id}&sharer=${
  //     useMemberStore().profile?.id
  //   }`
  //   console.log(sharePath)

  //   return {
  //     title: goods.value?.name,
  //     path: sharePath,
  //     imageUrl: fullUrl(goods.value!.images[0]),
  //   }
  // })


  onLoad(() => {
    // #ifdef MP-WEIXIN
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage'],
    })
    // #endif
    get_vote_detail()

    startCountdown()
  })
</script>

<template>
  <scroll-view scroll-y class="viewport" v-if="vote_info">
    <!-- 基本信息 -->
    <view class="goods">
      <!-- 商品主图 -->
      <view class="preview">
        <swiper circular @change="updateIndex" autoplay>
          <swiper-item v-for="item in vote_info?.images" :key="item">
            <image class="image" :src="fullUrl(item)" />
          </swiper-item>
        </swiper>
        <view class="indicator">
          <text class="current">{{ currentIndex + 1 }}</text>
          <text class="split">/</text>
          <text class="total">{{ vote_info?.images.length }}</text>
        </view>
      </view>
    </view>

    <view class="panel">
      <view class="meta">
        <view class="meta-top">
          <view class="operate">
            <!-- #ifdef MP-WEIXIN -->
            <view class="contact">
              <button open-type="contact" class="contact-button">
                <text class="icon-handset"></text>
              </button>
              <view class="contact-text">
                <text>客服</text>
              </view>
            </view>
            <!-- #endif -->
          </view>
        </view>
        <view class="name-box">
          <view class="name ellipsis">{{ vote_info?.title }} </view>
          <view class="vote">
            <view class="sales">
              投票数：{{vote_info.num}}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="panel">
      <uni-section title="详情" type="line">
        <view v-html="vote_info.editor"></view>

      </uni-section>
    </view>
    <view style="padding: 80rpx;"> </view>
    <view class="fixed-bottom">
      <view v-if="countdown > 0" class="btn">投票 {{countdown}}</view>
      <view v-else class="btn2" @click="doVote(vote_info.id)">投票</view>
    </view>

    <!-- <view :style="{ paddingBottom: '5rpx' }"> </view> -->

  </scroll-view>
</template>

<style lang="scss">
  swiper {
    height: 100%;
  }

  page {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
.fixed-bottom {
  position: fixed;
  bottom: 0%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  // background-color: #fff; /* 背景颜色，可以根据需要调整 */
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 可选：添加阴影 */
  height: 80rpx; /* 固定高度 */
  border-top: 1px solid #ddd; /* 可选：添加顶部边框 */
  z-index: 1100;
  background-color: #fff;

  .btn{
    width: 40%;
    border: 2rpx solid lightgray;
    background-color: lightgray;
    color: #fff;
    border-radius: 30rpx;
    text-align: center;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 35rpx;
  }
  .btn2{
    width: 40%;
    border: 2rpx solid #55aaff;
    background-color: #55aaff;
    color: #fff;
    border-radius: 30rpx;
    text-align: center;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 30rpx;
  }
}
  .vote {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .viewport {
    background-color: #f4f4f4;
    z-index: 999;
  }

  .panel {
    background-color: #fff;
    border-radius: 10rpx;
    margin: 15rpx 15rpx 20rpx;
    padding: 10rpx;
  }

  .arrow {
    &::after {
      position: absolute;
      top: 50%;
      right: 30rpx;
      content: '\e6c2';
      color: #ccc;
      font-family: 'iconfont' !important;
      font-size: 32rpx;
      transform: translateY(-50%);
    }
  }

  /* 商品信息 */
  .goods {
    background-color: #fff;

    .preview {
      height: 750rpx;
      position: relative;

      .image {
        width: 750rpx;
        height: 750rpx;
      }

      .indicator {
        height: 40rpx;
        padding: 0 24rpx;
        line-height: 40rpx;
        border-radius: 30rpx;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        bottom: 30rpx;
        right: 30rpx;

        .current {
          font-size: 26rpx;
        }

        .split {
          font-size: 24rpx;
          margin: 0 1rpx 0 2rpx;
        }

        .total {
          font-size: 24rpx;
        }
      }
    }
  }

  .meta {
    .meta-top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .operate {
      display: flex;

      .operate-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-items: center;
        padding-left: 15rpx;
        padding-right: 10rpx;

        .icon {
          text-align: center;
        }

        .icon-text {
          font-size: 20rpx;
          padding-top: 15rpx;
          color: #9a9a9a;
        }

        .icon-favorite-checked {
          color: red;
        }
      }

      .contact {
        button {
          width: 90rpx;
          height: 90rpx;
          background-color: transparent;
        }

        .contact-text {
          font-size: 20rpx;
          text-align: center;
          color: #9a9a9a;
          margin-top: -15rpx;
        }
      }
    }

    .price {
      height: 130rpx;
      padding: 0rpx 20rpx;
      color: red;
      font-size: 34rpx;
      box-sizing: border-box;
      background-color: #fff;
      display: flex;
      flex-direction: column;

      .origin {
        margin-top: 15rpx;
        color: #888;
        text-decoration: line-through;

        ::after {
          content: ￥;
        }
      }
    }

    .number {
      font-size: 50rpx;
    }

    .brand {
      width: 160rpx;
      height: 80rpx;
      overflow: hidden;
      position: absolute;
      top: 26rpx;
      right: 30rpx;
    }

    .name {
      max-height: 88rpx;
      line-height: 1.4;
      margin: 20rpx;
      font-size: 32rpx;
      color: #333;
    }

    .desc {
      line-height: 1;
      padding: 0 20rpx 30rpx;
      font-size: 24rpx;
      color: #cf4444;
    }

    .sales {
      margin: 20rpx;
      font-size: 24rpx;
      color: #888;
    }
  }

  .action {
    padding-left: 10rpx;
    background: #fff;

    .item {
      height: 90rpx;
      padding-right: 60rpx;
      border-bottom: 1rpx solid #eaeaea;
      font-size: 26rpx;
      color: #333;
      position: relative;
      display: flex;
      align-items: center;

      &:last-child {
        border-bottom: 0 none;
      }
    }

    .label {
      width: 60rpx;
      color: #898b94;
      margin: 0 16rpx 0 10rpx;
    }

    .text {
      flex: 1;
      -webkit-line-clamp: 1;
    }
  }

  .tip {
    font-size: 24rpx;
    color: #9a9a9a;

    .icon {
      padding-left: 10rpx;
    }
  }

  .eva-box {
    padding: 10rpx;

    .top {
      display: flex;
      align-items: center;
      padding-bottom: 20rpx;

      .name {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 26rpx;
        padding-bottom: 10rpx;
      }
    }

    .rate {
      margin-right: 10rpx;
    }

    .content {
      margin: 0rpx 10rpx 10rpx;
      max-height: 100rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 24rpx;
    }

    .scroll-view-container {
      width: 100%;
      white-space: nowrap;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;

      .content-img {
        margin-left: 10rpx;
        height: 150rpx;
        width: 150rpx;
        margin-bottom: 10rpx;
        margin-right: 10rpx;
        border-radius: 10rpx;
        margin-top: 10rpx;
        scroll-snap-align: start;
      }
    }
  }

  .properties {
    padding: 0 20rpx;

    .item {
      display: flex;
      line-height: 2;
      padding: 10rpx;
      font-size: 26rpx;
      color: #333;
      border-bottom: 1rpx dashed #ccc;
    }

    .label {
      width: 200rpx;
    }

    .value {
      flex: 1;
    }
  }

  /* 底部工具栏 */
  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: #fff;
    height: 100rpx;
    padding: 0 20rpx var(--window-bottom);
    border-top: 1rpx solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: content-box;

    .buttons {
      display: flex;

      &>view {
        width: 220rpx;
        text-align: center;
        line-height: 72rpx;
        font-size: 26rpx;
        color: #fff;
        border-radius: 72rpx;
      }

      .addcart {
        background-color: #ffa868;
      }

      .buynow,
      .payment {
        background-color: #ff5f3c;
        margin-left: 20rpx;
      }
    }

    .icons {
      padding-right: 10rpx;
      display: flex;
      align-items: center;
      flex: 1;

      .icons-button {
        flex: 1;
        text-align: center;
        line-height: 1.4;
        padding: 0;
        margin: 0;
        border-radius: 0;
        font-size: 20rpx;
        color: #333;
        background-color: #fff;

        &::after {
          border: none;
        }
      }

      text {
        display: block;
        font-size: 34rpx;
      }
    }
  }
</style>
